<template>
  <div>
    <van-nav-bar title="消息中心" left-arrow @click-left="goback">
      <template #right>
        <img @click="show1" src="./img/扫把.svg" alt="" width="30px" height="30px" style="margin-bottom: 20px">
      </template>
    </van-nav-bar>

    <div v-if="statusList[0].status==1&&statusList[1].status==1" @click="div1">
      <div class="div777">
        <div class="div999">
          <img class="img1" src="./img/铃铛.svg" alt="">
          <div class="div111" v-if="isShow && unreadList[0]!==0 && unreadList[0]!=null">{{ unreadList[0] }}</div>
        </div>
        <div class="div888">
          <div class="div666">
            <div class="div555">系统消息</div>
            <div class="div444">{{ expressSystem.createDate }}</div>
          </div>
          <div>
            <div class="div333">{{ expressSystem.content }}</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="statusList[0].status==1&&statusList[2].status==1" @click="div2">
      <div class="div777">
        <div class="div999"><img class="img1" src="./img/AK-MN_快递员.svg" alt="">
          <div class="div111" v-if="isShow && unreadList[1]!==0 && unreadList[0]!=null">{{ unreadList[1] }}</div>
        </div>
        <div class="div888">
          <div class="div666">
            <div class="div555">派件消息</div>
            <div class="div444">{{ expressDispatch.createDate }}</div>
          </div>
          <div>
            <div class="div333">{{ expressDispatch.content }}</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="statusList[0].status==1&&statusList[3].status==1" @click="div3">
      <div class="div777">
        <div class="div999"><img class="img1" src="./img/收件箱,空盒子.svg" alt="">
          <div class="div111" v-if="false">7</div>
        </div>
        <div class="div888">
          <div class="div666">
            <div class="div555">揽收消息</div>
            <div class="div444">12-05 12:00</div>
          </div>
          <div>
            <div class="div333">中央大街有一个快递待签收</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="statusList[0].status==1&&statusList[4].status==1" @click="div4">
      <div class="div777">
        <div class="div999"><img class="img1" src="./img/礼物盒.svg" alt="">
          <div class="div111" v-if="isShow && unreadList[2]!==0 && unreadList[0]!=null">{{ unreadList[2] }}</div>
        </div>
        <div class="div888">
          <div class="div666">
            <div class="div555">活动通知</div>
            <div class="div444">{{ expressActivity.createDate }}</div>
          </div>
          <div>
            <div class="div333">{{ expressActivity.content }}</div>
          </div>
        </div>
      </div>
    </div>


    <div>
      <van-tabbar v-model="active">
        <van-tabbar-item name="home" to="/home/Home" icon="wap-home-o">首页</van-tabbar-item>
        <van-tabbar-item name="message" to="/newsCenter" icon="chat-o" dot>消息</van-tabbar-item>
        <van-tabbar-item name="my" icon="friends-o" to="/mine">我的</van-tabbar-item>
      </van-tabbar>
    </div>
    <van-overlay :show="show" >
      <div class="wrapper" @click.stop>
        <div class="block" >
          <div id="div951" >提示</div>
          <div>是否一键清除所有未读数与红点?</div>
          <div id="div741" @click="isShow2">取消</div>
          <div id="div852" @click="isShow1">确定</div>
        </div>
      </div>
    </van-overlay>
  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "NewsCenter",
  data() {
    return {
      show: false,
      login: JSON.parse(localStorage.getItem('login')),
      messageVo: {
        expressSystemMessage:{},
        expressActivityMessage:{},
        expressDispatchMessage:{}
      },
      active: 'message',
      isShow: true,
      unreadList: [],
      expressSystem: {},
      expressActivity: {},
      expressDispatch: {},
      statusList: [],
    }
  },
  created() {
    // this.getMessage();
    // this.getLastMessage();
    this.getUnread();
    this.getLastOne();
    axios.get('http://localhost:11219/express/message/getRedis').then(res => {
      this.statusList = res.data.data;
      this.statusList.sort((a, b) => a.id - b.id);
    })
  },
  methods: {
    div1() {
      axios.get('http://localhost:11219/express/message/getSysMessage/' + this.login.registerIp).then(res => {
        if (res.data.code == 200) {
          this.expressSystemMessageList = res.data.data;
        }
      })

      axios.get('http://localhost:11219/express/message/updateSysMessage/' + this.login.registerIp);
      this.$router.push({
        path: '/systemInformation'
      })
    },
    div2() {

      axios.get('http://localhost:11219/express/message/updateDispatchMessage/' + this.login.id);
      this.$router.push({
        path: '/deliveryInformation'
      })
    },
    div3() {
      this.$router.push({
        path: '/collectionInformation'
      })
    },
    div4() {

      axios.get('http://localhost:11219/express/message/updateActivityMessage');
      this.$router.push({
        path: '/eventNotification'
      })
    },
    isShow1() {
      this.isShow = false;
      this.show = false;
    },
    show1(){
        this.show = true;
    },
    isShow2(){

      this.show = false;
    }   ,
    goback() {
      this.$router.go(-1);
    },
    getMessage() {
      axios.get('http://localhost:11219/express/message/getMessage/' + this.login.registerIp).then(res => {
        if (res.data.code == 200) {
          this.messageVo = res.data.data.messageVo;
          this.unreadList = res.data.data.unreadList;
          this.processData();
        }
      })
    },
    /*处理数据*/
    processData() {
      // this.expressSystemMessageList = this.messageVo.expressSystemMessage;
      // this.expressActivityMessageList = this.messageVo.expressActivityMessage;
      // this.expressDispatchMessageList = this.messageVo.expressDispatchMessageList;
      /*最后一个*/
      this.expressSystem = this.messageVo.expressSystemMessage;
      this.expressActivity = this.messageVo.expressActivityMessage;
      this.expressDispatch = this.messageVo.expressDispatchMessage;
    },

    getLastMessage() {
      axios.get('http://localhost:11219/express/message/getLastMessage/' + this.login.registerIp).then(res => {
        if (res.data.code == 200) {
          this.messageVo = res.data.data.messageVo;
        }
      })
    },
    getUnread() {
      axios.get('http://localhost:11219/express/message/countUnread/' + this.login.registerIp).then(res => {
        if (res.data.code == 200) {
          this.unreadList = res.data.data;
        }
      })
    },


    getLastOne(){
      axios.get('http://localhost:11219/express/message/getLastOneActivityMessage/' + this.login.registerIp).then(res => {
        if (res.data.code == 200) {
          this.expressActivity = res.data.data;
        }
      })
      axios.get('http://localhost:11219/express/message/getLastOneSysMessage/' + this.login.registerIp).then(res => {
        if (res.data.code == 200) {
          this.expressSystem = res.data.data;
        }
      })
      axios.get('http://localhost:11219/express/message/getLastOneDisMessage/' + this.login.registerIp).then(res => {
        if (res.data.code == 200) {
          this.expressDispatch = res.data.data;
        }
      })
    },







    
  }
}
</script>

<style scoped>
#div951{
  font-size: 18px;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 5px;
}
 #div741{
   float: left;
   width:150px;
   height: 40px;
   padding-top: 10px;
   color: #d8d5d5;
 }
 #div852{
   float: right;
   width:150px;
   height: 40px;
   padding-top: 10px;
   color: #9ccced;
 }
.img1 {
  width: 50px;
  height: 50px;
}

.div111 {
  background: red;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  float: right;
  position: relative;
  top: 10px;
  left: -10px;
}

.div999 {
  float: left;
  margin-left: 20px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 300px;
  height: 100px;
  background-color: #fff;
}
.div888 {
  float: right;
  width: 75%;
  height: 100%;

}

.div777 {
  width: 100%;
  height: 100px;
  background: white;
}

.div666 {
  width: 100%;
  height: 40px;

}

.div555 {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  font-size: 16px;
  font-weight: bold;
}

.div444 {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  font-size: 12px;
  color: #6c6c6c;
}

.div333 {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  font-size: 14px;
  color: #dcd7d7;
}

</style>